<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Access confirmation</title>

    <!-- CSS -->
    <link rel="stylesheet" th:href="@{assets/material/material.blue_grey-blue.min.css}">
    <link rel="stylesheet" th:href="@{assets/material/material.icons.css}">
    <link rel="stylesheet" th:href="@{assets/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{assets/css/access_confirmation.css}">

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" th:href="@{assets/ico/favicon.ico}">
</head>

<body>
<div class="mdl-layout mdl-js-layout">
    <div class="access-confirmation-container">
        <div class="access-confirmation-content">
            <div class="access-confirmation-title">
                <label>Permissions requested</label>
                <span><span style="font-weight: bold" th:text="${client.clientName}"></span> is requesting permissions to access your account</span>
            </div>
            <form role="form" th:id="confirmationForm" th:action="@{consent}" method="post">
                <div class="permissions">
                    <p>This app would like to :</p>
                    <div class="permission" th:each="scope : ${scopes}">
                        <div class="permission-logo">
                            <i class="fa fa-check"></i>
                        </div>
                        <div class="permission-info">
                            <h3><span th:text="(${scope.name}) ? ${scope.name} : ${scope.key}"></span> (<span th:text="${scope.key}"></span>)</h3>
                            <p th:text="${scope.description}"></p>
                            <input type="hidden" th:name="'scope.'+${scope.key}" value="true"/>
                        </div>
                    </div>
                    <div class="permissions-disclaimer">
                        <small>By accepting these permissions, you allow this application to use your data in accordance to their terms of service and privacy policies.</small>
                    </div>
                </div>

                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                <div class="access-confirmation-form-actions">
                    <button type="submit" name="user_oauth_approval" value="false" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" style="margin-right: 10px;">Cancel</button>
                    <button type="submit" name="user_oauth_approval" value="true" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Accept</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Javascript -->

<!--[if lt IE 10]>
<script th:src="@{assets/js/placeholder.js}"></script>
<![endif]-->
<script th:src="@{assets/material/material.min.js}"></script>
</body>
</html>
